<template>
	<div ref="dom" class="charts chart-bar" style="background-color: #f6f7fb"></div>
  <!-- f6f7fb -->
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
// console.log(tdTheme)
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Array,
    text: String,
    rotate: String,
    barWidth: String,
    subtext: String,
    series: Array,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    legendData: Array,
    seriesName: String,
    color: {
      type: Array,
      default: () => {
        return ['#2f83e4']
      }
    }
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    text: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    series: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    rotate: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    barWidth: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    intChart () {
      var that = this
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.showLoading({
          text: 'loading',
          color: '#2D8CF0',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        })
      this.$nextTick(() => {
        let data = that.value
        console.log(data)
        let xData = []
        let yData = []
        for (let i in data) {
          xData.push(data[i].name)
          yData.push(data[i].value)
        }

        let option = {
          title: {
            top: '8%',
            text: this.text,
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 24
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          },
          color: '#5383FF',
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            y: 'center',
            right: '10px',
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          grid: {
            top: '20%',
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              interval: 0, // 强制显示文字
              show: true,
              textStyle: {
                color: '#333',
                fontSize: 16,
                fontWeight: 500
              },
              rotate: this.rotate
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: this.seriesName,
              type: 'bar',
              barWidth: this.barWidth + '%',
              data: yData,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#000'
                }
              },
              itemStyle: {
                normal: {
                  color: (params) => {
                    var colorList = [
                      '#5383FF',
                      '#74D8C9',
                    ]
                    let index
                    for (let i in data){
                      if (params.name == data[i].name){
                        let color = data[i].radios
                        if (color=='1') {
                          index = 0
                        } else {
                          index = 1
                        }
                      }
                    }
                    return colorList[index]
                  }
                }
              }
            }
          ]
        }
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);
        on(window, 'resize', this.resize)
      }
      )
    }
  },
  mounted () {
    this.intChart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
